<template>
  <baseCard
    :title="'用户访问情况'"
    height="4.52rem"
    :contentPadding="'0.2rem 0.2rem 0.2rem 0.18rem'"
    style="margin-left: 0; margin-right: 0"
  >
  <!-- {{ usercount }} -->
    <div class="vpt-user-visitor-warpper">
      <div class="vpt-user-visitor-top">
        <div class="vpt-user-visitor-left" style="margin-right: 0.16rem">
          <img class="icon" src="@/assets/img/theme2/icon-user.png" />
          <label>当前在线人数</label>
           <div class="online-value">
            <!--  -->
            {{ addThousandsSeparator(usercount.count ? usercount.count : "-") }}
          </div>
          <div class="bottom">
            <div class="label">当日在线人数峰值</div>
            <div class="value">
              {{ addThousandsSeparator(usercount.todayMaxCount ? usercount.todayMaxCount : "-") }}
            </div>
          </div>
          <!-- <div class="online-value">
            {{ addThousandsSeparator(userAccess.per_num ? userAccess.per_num : "-") }}
          </div>
          <div class="bottom">
            <div class="label">当日在线人数峰值</div>
            <div class="value">
              {{ addThousandsSeparator(userAccess.per_num_max ? userAccess.per_num_max : "-") }}
            </div>
          </div> -->
        </div>
        <div class="vpt-user-visitor-left">
          <img class="icon" src="@/assets/img/theme2/icon-user.png" />
          <label>累计访问人次</label>
           <div class="online-value">
            {{ addThousandsSeparator(usercount.allCount ? usercount.allCount : "-") }}
          </div>
          <div class="bottom">
            <div class="label">当前访问人数</div>
            <div class="value">
              {{ addThousandsSeparator(usercount.todayCount ? usercount.todayCount : "-") }}
            </div>
          </div>
          <!-- <div class="online-value">
            {{ addThousandsSeparator(userAccess.total_num ? userAccess.total_num : "-") }}
          </div>
          <div class="bottom">
            <div class="label">当前访问人数</div>
            <div class="value">
              {{ addThousandsSeparator(userAccess.total_num_day ? userAccess.total_num_day : "-") }}
            </div>
          </div> -->
        </div>
      </div>

      <div class="vpt-user-visitor-bottom">
        <section class="vpt-left">
          <header class="title">注册用户数</header>
          <div class="value">
            {{ addThousandsSeparator(userAccess.user_num ? userAccess.user_num : "-") }}
          </div>
          <div class="bottom">
            <div class="b-label">其中省本级</div>
            <div class="b-value">
              {{ addThousandsSeparator(userAccess.user_num_sbj?userAccess.user_num_sbj:'-' )}}
            </div>
          </div>
          <img class="user-icon" src="@/assets/img/theme3/user-icon.png" />
        </section>
        <section class="vpt-right">
          <div class="vpt-right-item" v-for="(item, i) in dataList" :key="i">
            <label>{{ item.title }}</label>
            <div>
              {{ addThousandsSeparator(userAccess[item.value] ? userAccess[item.value] : "-") }}
            </div>
          </div>
        </section>
      </div>
    </div>
  </baseCard>
</template>
<script setup>
//用户访问情况
import { computed, ref } from "vue";
import baseCard from "@/components/vpt-cards-1002/index.vue";
import { numberToCurrencyNo } from "@/utils/formatter.js";
import { addThousandsSeparator } from '@/utils/formatter.js';

const props = defineProps({
  usercount: { type: Object,
    default: () => {
      return {};
    },},
  userAccess: {
    type: Object,
    default: () => {
      return {};
    },
  },
  userNumber: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  porvNumber: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  userSessionNumber: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  dataList: {
    type: Array,
    default: () => {
      return [
        { title: "财政用户", value: "vuser_num_cz" },
        { title: "单位财务用户数", value: "user_num_cw" },
        { title: "单位非财务用户", value: "user_num_fcw" },
        { title: "系统运维人员", value: "user_num_yw" },
        { title: "其他", value: "user_num_qt" },
      ];
    },
  },
});

const userSessionNumberCache = computed(() => {
  return numberToCurrencyNo(props.userSessionNumber);
});

const userNumberCache = computed(() => {
  return numberToCurrencyNo(props.userNumber);
});
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
